import React,{useState,useEffect} from 'react';
import { Row, Col, Divider,Space } from 'antd';
import {getComponentType}from '../../../api/component'

// import {changeData, changeName} from '@/store/actions'

export default function Index(props) {

  const{store,dispatch}=props;

  console.log("测试获取到的数据",store);
  //把数据添加到 仓库
  

  const[comList,setComList]=useState([]);
  //存储选择了那些
  const[typeName,setTypeName]=useState([]);
  console.log(typeName);

  useEffect(()=>{
    dispatch({type:"ADDtypeName",name:typeName})

  },[typeName])
 
  let itemname='';
  let dataname='';

  function selectType(data){
   

    const arr=comList.filter((item)=>{ 
      
      itemname=item.name+"".replace(/\s*/g,"");
      dataname=data.target.innerHTML;
  
        return item.name==data.target.innerHTML?item:null;
  
      })
    
      setTypeName([...typeName,arr[0].id])
   
 //   setTypeName([...typeName,data.target.innerHTML])
  }

  useEffect(()=>{
    getComponentType().then((data)=>{
      setComList(data.data);
      
    })
  },[comList])

  


  //异步获取数据放入状态中并渲染页面
  return (
    <>

<Space size={20}>
  <span>组件类型：</span>
{
          comList.map((item,index)=>{
            return (
              <a key={item.id} onClick={selectType} style={{color:"black"}}>{item.name}</a>

            )

          })
        }
      
        
      </Space>
        
     
    </>
  );
}
